<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
	<style type="text/css">
	.loadingbig{
	margin-left:10px;
	width:100px;
	height:100px;
	}
	</style>
</head>
<body>
<div class="ibox-content">
		<form class="form-horizontal" id="dataform" onsubmit="javascripr:return false;">
			<input type="hidden" name="tokenUrl" value="${tokenUrl}">	 
			<input type="hidden" name="token" value="${token}">
		<input type="hidden" id="type" value="${type}">
		<div class="form-group">
			<label class="col-sm-2 control-label">产品名称
			</label>
			<div class="col-sm-4">
			<input class="form-control" disabled="disabled" value="${obj.proName }"/>
			</div>
			<c:if test="${type eq '1'}"><button id="addimgbtn" class=" btn btn-success btn-sm"  type="button" onclick="add()" style="width:100px;height:34px;">添加产品图片</button></c:if>
			<c:if test="${type eq '2'}"><button id="addimgbtn" class=" btn btn-success btn-sm"  type="button" onclick="add()" style="width:150px;height:34px;">添加图文详情图片</button></c:if>
		</div>
		<div class="form-group imgs">
		<table class="table table-hover" id="mgrid" >
			<tbody id="show">
	 			<tr id="no1">
	   				 <td align="center">序号</td>
	    			 <td align="center" >排序</td>
	    			 <td align="center" >上传图片</td>
	    			 <td   >操作</td>
	   			</tr>
	   			<c:forEach var='item' items="${list }" varStatus="s">
	   			<tr  >
	   				<td align="center" style="width:80px;">
	   				${s.index+1 }
	   				</td>
	   				
	   				<td align="center" style="width:200px">
	   				<input  id="imgSequence" class="input-text form-control"  dataType="n1-3" maxlength="3"
					type="number" value="${item.imgSequence }" style="width:100px;display: inline;" nullmsg="请填写整数"/> 
	   				<span class="Validform_checktip"></span>
	   				</td>
	   				<td  style="width:600px;">
	   				<input type="hidden" value="${item.imgId }"/>
	   				<input type="hidden" value="${obj.proId }"/>
					<input name="imgName" id="imgId${s.index+1 }" class="input-text upload-url radius form-control inpImg"
					type="text" value="${item.imgUrl }" readonly style="width:300px;display: inline;"/> 
					<a class="btn btn-primary radius upload-a" style="margin-left:10px;">
					<i class="fa fa-cloud-upload"></i> 上传图片</a>
	   				<input type="hidden" id="imgId${s.index+1 }1" value="${item.imgUrl}">
	   				</td>
	   				<td  >
	   				<button class=" btn btn-danger btn-sm" style="margin-left:10px;width:100px;height:34px;" type="button" onclick="del(this)">删除</button>
	   				</td>
	   			</tr>  
	   			</c:forEach>
  			</tbody>
 		 </table>
		
		</div>
		
		<div class="form-group ">
			<div class="col-sm-12 text-center">
				 <a href="javascript:;" onclick="myForm.submit()"
					class="btn btn-success radius"><i class="fa fa-check"></i>  保存</a>
					&nbsp;&nbsp;&nbsp;&nbsp; <a
					 class="btn btn-danger radius" href="javascript:;" onclick="MTools.closeForm()" ><i class="fa fa-close"></i> 关闭</a>
			</div>
		</div>
	</form>
	</div>
</body>
 <script type="template" id="template">
	<tr  >
		<td align="center" style="width:80px;">序号</td>

		<td align="center" style="width:200px;">
			<input  id="imgSequence" class="input-text form-control"  dataType="n1-3"  maxlength="3"
			type="number" value="sequenceValue" style="width:100px;display: inline;" nullmsg="请填写整数"/>
			<span class="Validform_checktip"></span>
		</td>
		<td  style="width:600px">
		   <input type="hidden" value=""/>
			<input type="hidden" value="${obj.proId }"/>
				<input name="imgName" id="imgId" class="input-text upload-url radius form-control inpImg"
					type="text" value="" readonly style="width:300px;display: inline;"/> 
				<a class="btn btn-primary radius upload-a" style="margin-left:10px;">
				<i class="fa fa-cloud-upload"></i> 上传图片</a>
		</td>
			<td >
	   			<button class=" btn btn-danger btn-sm" style="margin-left:10px;width:100px;height:34px;" type="button" onclick="del(this)">删除</button>
	   		</td>
	</tr>  

</script>
<script type="text/javascript" src="${path }/resource/js/systools/MJsBase.js"></script>
<script type="text/javascript">
$(function() {		
	MUI.initImgUpload(".inpImg");
	changeName();
});
	MTools.autoFullSelect();
	$(".select2").select2();
	var myForm=MForm.initForm({
		invokeUrl:"${path}/admin/distributionImages/modify",
		beforeSubmit : function() {
			var upImgs = $('#show > tr').not('#no1');
			console.log(upImgs);
			if(upImgs.length == 0) {
				layer.tips("请添加图片！", '#addimgbtn', {tips : 1});
				return false;
			}
// 			return false;
		},
		afterSubmit:function(){
			parent.myGrid.serchData();
		},
	});
	function add(){
		var index=$('.inpImg').length;
		var sequence=parseInt(chooseNum());
		var str=$("#template").html().replace("imgId","proimgId"+index)
		.replace("imgName","proimgName"+index).replace("序号",(index+1))
		.replace("sequenceValue",sequence+1);
		$('#show').append(str);
		MUI.initImgUpload("#proimgId"+index);
		changeName();
	}
	function del(_this){
		var url=$(_this).parent().prev().find('input').eq(2).val(); 
		var id=$(_this).parent().prev().find('input').eq(0).val();
		$(_this).closest("tr").remove();
		MUI.delFile(url);
		if(id && !isNaN(parseInt(id)) ) {
		$.AjaxProxy({p:{imgId:parseInt(id),imgUrl:url}}).invoke("${path}/admin/distributionImages/delFile",function(loj){
			if(loj.getValue("status")=="ok"){
				console.log("删除文件成功");
			}else{
				console.log("删除文件失败");
			}
		});
		}
		changeName();
	}
	function changeName(){
		var j=0;
		 $('.inpImg').each(function(){
		$(this).closest("tr").find('td').eq(0).html(j+1);
		$(this).prev().attr("name",'imgList['+j+'].imgUrl');
		$(this).parent().find('input').eq(0).attr("name",'imgList['+j+'].imgId');
		$(this).closest("tr").find('input').eq(0).attr("name",'imgList['+j+'].imgSequence');
		j++;
		}) ; 
	}
	function chooseNum(){
		var num=0;
		 $('.inpImg').each(function(){
			var seq= parseInt($(this).closest("tr").find('input').eq(0).val());
			if(seq>num){
				num=seq;
			}
		 })
		 return num;
	}
</script>
</body>
</html>